<template>
<j-vxe-table
  ref="xTavle"
  :columns="columns"
  :data-source="dataSource"
  toolbar
  bordered
  row-number
  row-selection
  :maxHeight="500"
  row-selection-type="radio"
  row-expand
  click-select-row
  >

  <template v-slot:expandContent="props">
    <h1>Hello World! My name is :{{ props.row.name}}</h1>
  </template>

  <template v-slot:sss="props">
    <a @click="handleClick(props)">编辑</a>
    <a @click="handleDelete(props)">删除</a>
  </template>

</j-vxe-table>
</template>

<script>
import {JVXETypes} from "@comp/jeecg/JVxeTable";

export default {
  name: "TestJVXE",
  data(){
    return{
      columns:[
        {
          title: '姓_名',
          key: 'name',
          type: JVXETypes.input,
          placeholder: '请输入姓名',
          validateRules:[
            {required:true,message:"${title}必须填写",},
          ],
        },
        {
          title: '年龄',
          key: 'age',
          type: JVXETypes.inputNumber,
          validateRules:[
            {
              handle({cellValue,row,column},callback,target){
                    if (cellValue < 18) {
                    callback(false, '提示小于18') // false = 未通过，可以跟自定义提示
                  } else {
                    callback(true) // true = 通过验证
                  }
                      callback()
            },
            }
          ],
        },
        {
          title: '性别',
          key: 'sex',
          type: JVXETypes.select,
          dictCode: 'sex'
        },
        {
          title: 'text',
          key: 'text',
          type: JVXETypes.select,
          defaultValue: 'hello world!',
        },
        {
          title: 'slot',
          key: 'slot',
          type: JVXETypes.slot,
          defaultValue: 'sss',
        }
      ],
      dataSource: []
    }
  },
  methods:{
    log(s){
      console.log(s)
    },
    handleClick() {
      this.$message.warn("点击了编辑！")
    },
    handleDelete(props){

    },
  },
}
</script>

<style scoped>

</style>